import React from "react";

import { Link, Outlet } from "react-router-dom";

export default function Message() {
  const messages = [
    { id: 1, title: "消息1", content: "内容1" },
    { id: 2, title: "消息2", content: "内容2" },
    { id: 3, title: "消息3", content: "内容3" },
  ];

  return (
    <div>
      <nav>
        <ul>
          {messages.map((m) => {
            // 向组件传递params参数
            // return <Link key={m.id} to={`${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
            // 向组件传递search参数
            return <Link key={m.id} to={`?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
          })}
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}
